<!--  -->
<template>
<div class=''>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
       <div><el-button type="primary">添加角色</el-button> </div>
        <el-table :data="rolesdata" stripe border>
        <el-table-column type="expand" >
          <template slot-scope="scope" >
            <el-row v-for="(item1,index) in scope.row.childern  " :key="item1.authName" :class="['borderbottom',index==0?'bordertop':'','juzhong']">
                <el-col  :span="5">
                   <el-tag closable @close="removeTag()">{{item1.authName}}</el-tag>
                   <i class="el-icon-caret-right"></i>
                </el-col>
             <el-col :span="19" >
               <el-row  v-for="(item2) in item1.childern  " :key="item2.authName" :class="['bordertop','juzhong']">
                 <el-col :span="6">  <el-tag  type="success" closable @close="removeTag()">{{item2.authName}}</el-tag > <i class="el-icon-caret-right"></i> </el-col>
                 <el-col :span="18"><el-tag v-for="item3 in item2.childern" :key="item3.authName" type="waring" closable @close="removeTag()">{{item3.authName}}</el-tag></el-col>
               </el-row>
             </el-col>
                </el-row> 


          </template>

        </el-table-column>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="角色名称" prop="authName"></el-table-column>
        <el-table-column label="角色描述" prop="desc"></el-table-column>
        <el-table-column label="操作" >
           <template >
               <el-button  icon="el-icon-edit"     type="primary" size="mini">编辑</el-button>
               <el-button  icon="el-icon-delete"   type="danger" size="mini">删除</el-button>
               <el-button  icon="el-icon-setting"  type="warning" size="mini" @click="changeRights()">分配权限</el-button>
           </template>
        </el-table-column>
         </el-table>
    </el-card>

<el-dialog
  title="分配权限"
  :visible.sync="dialogVisible"
  width="50%"
 >
 <el-tree :data="rolesdata" :props="defaultProps" default-expand-all  show-checkbox></el-tree>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
  rolesdata:[],
  dialogVisible:false,
  defaultProps:{
     children:'childern',
     label:'authName'
  }
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  async requestRoles(){
      const {data:res} =await this.$http.get("/roles")
      console.log(res.data);
      if(res.err==0){
          this.rolesdata = res.data
          this.$message.success("数据请求成功")
      }else{
          this.$message.error("数据请求失败")
      }
      
  },
  removeTag(){
     this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(res=>{
              console.log(res);
              
        }).catch(err=>{
          console.log(err);
          
        })
  },
  changeRights(){
    this.dialogVisible = true






  }
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
  this.requestRoles()
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
deactivated() {}
}
</script>
<style  scoped>
  .el-tag{
      margin: 7px;
  }
  .bordertop{
    border-top: 1px solid #eee;
  }
  .borderbottom{
      border-bottom: 1px solid #eee;
  }
  .juzhong{
    display: flex;
    align-items: center;
  }

</style>